.#{$row-prefix-cls} {
  display: flex;
  flex-flow: row wrap;

  &::before,
  &::after {
    display: flex;
  }

  // No wrap of flex
  &-no-wrap {
    flex-wrap: nowrap;
  }

  // x轴原点
  &-start {
    justify-content: flex-start;
  }
  // x轴居中
  &-center {
    justify-content: center;
  }
  //x轴反方向
  &-end {
    justify-content: flex-end;
  }
  // x轴平分
  &-space-between {
    justify-content: space-between;
  }
  // x轴有间隔地平分
  &-space-around {
    justify-content: space-around;
  }
  // 顶部对齐
  &-top {
    align-items: flex-start;
  }
  // 居中对齐
  &-middle {
    align-items: center;
  }
  // 底部对齐
  &-bottom {
    align-items: flex-end;
  }
}

.#{$col-prefix-cls} {
  max-width: 100%;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  position: relative;
}

@include make-grid();

// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.

@include make-grid(-xs);

// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.

@media (min-width: $screen-sm-min) {
  @include make-grid(-sm);
}


// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: $screen-md-min) {
  @include make-grid(-md);
}


// Large grid
//
// Columns, offsets, pushes, and pulls for the wide desktop device range.

@media (min-width: $screen-lg-min) {
  @include make-grid(-lg);
}


// Extra large grid
//
// Columns, offsets, pushes, and pulls for the full hd desktop device range.

@media (min-width: $screen-xl-min) {
  @include make-grid(-xl);
}


// Extra extra large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: $screen-xxl-min) {
  @include make-grid(-xxl);
}
